<template>
  <div>
    <!-- 选择导航栏 -->
    <div class="chooseTitle">
      <span class="mr-3">{{ $t('flyparam.data_format') }}:</span>
      <!-- <div> -->
      <el-radio v-model="fileType" :label="1">JSON</el-radio>
      <el-radio v-model="fileType" :label="2">ASN.1</el-radio>
      <el-radio v-model="fileType" :label="3">XML</el-radio>
      <!-- </div> -->
    </div>
    <!-- 内容展示区域 -->

    <div v-loading="loading" class="preview-container">
      <json-viewer
        v-if="fileType === 1"
        :show-array-index="false"
        class="jsonShow"
        :value="content"
        :expand-depth="10"
        copyable
        sort
        show-double-quotes
      />
      <div v-else-if="fileType === 2" class="relative asn1 light">
        <div id="dump" style="position: absolute; right: 0px;" />
        <div id="tree" />
      </div>
      <pre v-else-if="fileType === 3" v-highlightjs="content">
       <code class="xml" />
     </pre>
    </div>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import { decodeText } from 'static/asn1/index'
import base64 from '@/utils/base64'
import { getParameterTemplatePreview } from '@/api/parameter'

var format = require('xml-formatter')

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      fileType: 1,
      content: '',
      loading: false,
      xml: ''
    }
  },
  watch: {
    fileType(oldValue, newValue) {
      this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      getParameterTemplatePreview(this.$route.params.id, this.fileType)
        .then((data) => {
          console.log(data)
          if (this.fileType === 1) {
            const decoded = base64.decode(data.previewData) || '{}'
            this.content = JSON.parse(decoded)
          } else if (this.fileType === 2) {
            const tree = document.getElementById('tree')
            const dump = document.getElementById('dump')

            decodeText(data.previewData, tree, dump)
          } else if (this.fileType === 3) {
            // this.xml = base64.decode(data.previewData)
            this.content = format(base64.decode(data.previewData))
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/json-viewer.scss';
@import '@/styles/asn1.scss';
</style>

<style lang="scss" scoped>
.xml {
  color: #9cdcfe;
}
::v-deep .flyparameter-app-info .el-card__body {
  padding: 0;
}

::v-deep .hljs {
  background: #ffffff;
}

::v-deep .jv-container {
  .jv-code {
    padding: 0;
  }
  &.jv-light {
    .jv-key {
      font-weight: bold;
      color: #92278f;
    }
    .jv-item.jv-string {
      font-weight: bold;
      color: #42b983;
    }
  }
}
@import '@/styles/mixin.scss';
@include preview;
.preview-container {
  background: #ffffff;
  overflow: auto;
  min-height: calc(100vh + 100px);
}
.chooseTitle {
  padding: 10px;
  border-bottom: 1px solid #edf2f9;
}
</style>
